<template>
  <view class="detail-cell-wrap ss-flex ss-col-center" @tap="onClick">
    <view class="label-text">{{ label }}</view>
    <view class="content-wrapper ss-flex ss-flex-wrap">
      <view class="cell-content" v-for="item in value" :key="item.id">
        <view class="ss-flex ss-items-center">
          <image
          class="title-icon ss-m-r-14"
          :src="sheep.$url.cdn(item.image)"
          mode="aspectFill"
          ></image>
          {{ item.name }}
        </view>
      </view>
    </view>
    <button class="ss-reset-button" v-if="!noPopup">
      <text class="_icon-forward right-forwrad-icon"></text>
    </button>
  </view>
</template>

<script setup>
  /**
   * 详情 cell
   *
   */
  import sheep from '@/sheep';

  const props = defineProps({
    label: {
      type: String,
      default: '',
    },
    value: {
      type: Array,
      default: [],
    },
    noPopup: {
      type: Boolean,
      default: false,
    },
  });

  const emits = defineEmits(['click']);

  // 点击
  const onClick = () => {
    emits('click');
  };
</script>

<style lang="scss" scoped>
  .title-icon {
    width: 32rpx;
    height: 32rpx;
  }

  .content-wrapper {
    gap: 16px;
  }

  .detail-cell-wrap {
    padding: 10rpx 20rpx 10px 0;
    gap: 16px;
    align-items: start;

    .label-text {
      font-size: 28rpx;
      font-weight: 500;
      color: $dark-9;
      flex-shrink: 0;
    }

    .cell-content {
      font-size: 28rpx;
      font-weight: 500;
      color: $dark-6;
    }

    .right-forwrad-icon {
      font-size: 28rpx;
      font-weight: 500;
      color: $dark-9;
    }
  }
</style>
